import React from "react";
import './login.css'
import './reset.css'
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            account: '',
            password: '',
            act: false,//账号验证成功 绿色
            actError: false,//账号验证失败 红色
            pas: false,//密码验证成功 绿色
            pasError: false,//密码验证失败 红色
            actxt: '',
            pstxt: ''
        }
    }
    btn() {
        if (this.state.actError==false && this.state.pasError==false) {
            this.$axios.post('https://apipc-xiaotuxian-front.itheima.net/login', { account: this.state.account, password: this.state.password }).then(res => {
                console.log(res);
                if (res.data.msg == '操作成功') {
                    window.localStorage.setItem('token', res.data.result.token)
                    window.localStorage.setItem('account', res.data.result.account)
                    setTimeout(() => {
                        window.location = '/'
                    })
                }
            })
        }

    }
    accountHandle(e) {
        this.setState({
            account: e.target.value
        })
    }
    passwordHandle(e) {
        this.setState({
            password: e.target.value
        })
    }
    //账号
    focus() {
        this.setState({
            act: true
        })

    }
    blur() {
        var reg = /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})$/
        if (this.state.account.length != 0) {
            this.setState({
                actxt: '字母开头且6-20个字符'
            })
            // console.log(reg.test(this.state.account));
            if (reg.test(this.state.account)) {
                this.setState({
                    act: false,
                    actError: false
                })
            } else {
                this.setState({
                    act: false,
                    actError: true
                })
            }
        } else {
            this.setState({
                actxt: '请输入用户名',
                act: false,
                actError: true
            })
        }
    }
    //密码
    focusHandle() {
        this.setState({
            pas: true
        })
    }
    blurHandle() {
        var reg = /^[a-zA-Z0-9_]{6,24}$/
        if (this.state.password.length != 0) {
            this.setState({
                pstxt: ' 密码6-24个字符'
            })
            // console.log(reg.test(this.state.password));
            if (reg.test(this.state.password)) {
                this.setState({
                    pas: false,
                    pasError: false
                })
            } else {
                this.setState({
                    pas: false,
                    pasError: true
                })
            }
        } else {
            this.setState({
                pstxt: ' 请输入密码',
                pas: false,
                pasError: true
            })
        }
    }
    render() {
        const { account, password, act, pas, actxt, pstxt, actError, pasError } = this.state
        return <div>
            <div data-v-37dfd6fc="" id="app">
                <header data-v-37dfd6fc="" className="login-header">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <h1 data-v-37dfd6fc="" className="logo">
                            <a data-v-37dfd6fc="" href="#!">小兔鲜</a>
                        </h1>
                        <h3 data-v-37dfd6fc="" className="sub">欢迎登录</h3>
                        <a data-v-37dfd6fc="" href="/#/" className="entry">
                            进入网站首页
                            <i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i
                            ><i data-v-37dfd6fc="" className="iconfont icon-angle-right"></i
                            ></a>
                    </div>
                </header>
                <section data-v-37dfd6fc="" className="login-section">
                    <div data-v-37dfd6fc="" className="wrapper">
                        <nav data-v-37dfd6fc="">
                            账户登录
                        </nav>
                        <div data-v-37dfd6fc="" className="account-box">
                            <div data-v-37dfd6fc="" className="toggle">
                                <i data-v-37dfd6fc="" className="iconfont icon-envelope-o"></i>
                                使用短信登录
                            </div>
                            <form
                                data-v-37dfd6fc=""
                                noValidate="noValidate"
                                autoComplete="off"
                                className="form"
                            >
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-user-o">
                                        </i>
                                        <input
                                            data-v-37dfd6fc=""
                                            type="text"
                                            placeholder="请输入用户名"
                                            onFocus={this.focus.bind(this)}
                                            onBlur={this.blur.bind(this)}
                                            value={account}
                                            onChange={this.accountHandle.bind(this)}
                                            className={`${act ? 'bd_blue' : ''} ${actError ? 'bd_red' : ''}`}
                                            name="account" />
                                    </div>
                                    {
                                        actError && <div className="error">{actxt}</div>
                                    }
                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="input">
                                        <i data-v-37dfd6fc="" className="iconfont icon-lock8"></i>
                                        <input data-v-37dfd6fc="" type="password" value={password}
                                            onChange={this.passwordHandle.bind(this)}
                                            placeholder="请输入密码"
                                            onFocus={this.focusHandle.bind(this)}
                                            onBlur={this.blurHandle.bind(this)}
                                            className={`${pas ? 'bd_blue' : ''} ${pasError ? 'bd_red' : ''}`}
                                            name="password" />
                                    </div>
                                    {
                                        pasError && <div className="error">{pstxt}</div>
                                    }

                                </div>
                                <div data-v-37dfd6fc="" className="form-item">
                                    <div data-v-37dfd6fc="" className="agree">
                                        <span data-v-37dfd6fc="">我已同意</span
                                        >《隐私条款》<span data-v-37dfd6fc="">和</span
                                        >《服务条款》
                                    </div>
                                </div>
                                <div className="btn" onClick={this.btn.bind(this)}>登录</div>
                            </form>
                            <div data-v-37dfd6fc="" className="action">
                                <a
                                    data-v-37dfd6fc=""
                                    href="https://graph.qq.com/oauth2.0/authorize?client_id=101941968&amp;response_type=token&amp;scope=all&amp;redirect_uri=http%3A%2F%2Ferabbit.itheima.net%2F%23%2Flogin%2Fcallback"
                                ><img
                                        data-v-37dfd6fc=""
                                        src="https://qzonestyle.gtimg.cn/qzone/vas/opensns/res/img/Connect_logo_7.png"
                                        alt=""
                                    /></a>
                                <div data-v-37dfd6fc="" className="url">
                                    忘记密码免费注册
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <footer data-v-37dfd6fc="" className="login-footer">
                    <div data-v-37dfd6fc="" className="commonwidth">
                        <p data-v-37dfd6fc="">
                            <a data-v-37dfd6fc="" href="#!">关于我们</a
                            ><a data-v-37dfd6fc="" href="#!">帮助中心</a
                            ><a data-v-37dfd6fc="" href="#!">售后服务</a
                            ><a data-v-37dfd6fc="" href="#!">配送与验收</a
                            ><a data-v-37dfd6fc="" href="#!">商务合作</a
                            ><a data-v-37dfd6fc="" href="#!">搜索推荐</a
                            ><a data-v-37dfd6fc="" href="#!">友情链接</a>
                        </p>
                        <p data-v-37dfd6fc="">CopyRight © 小兔鲜儿</p>
                    </div>
                </footer>
            </div>
        </div>
    }
}